<div class="modal-dialog modal-lg aiAgentExceededTokenThresholdDetails" id="js-ai-agent-token-threshold-details" role="document">
    <div class="modal-content force-text-wrap-word" tabindex="-1">
        <div class="modal-header">
            <button type="button" class="close" data-bind="click: close" aria-hidden="true">
                <i class="icon-cancel"></i>
            </button>
            <div data-bind="with: alert">
                <h3 class="modal-title" id="myModalLabel" data-bind="text: title, attr:{ class: 'modal-title ' + headerClass() }"></h3>
                <div class="notification-time" data-bind="text: displayDate().format('LLL')"></div>
            </div>
        </div>
        <div class="modal-body">
            <h3 data-bind="html: alert.message"></h3>
            <div class="modal-details">
                <div class="details-item">
                    <div class="row">
                        <div class="col-md-4 text-right">Agent Name</div>
                        <div class="col-md-8 details-value" data-bind="text: agentName"></div>
                    </div>
                </div>
                <div class="details-item">
                    <div class="row">
                        <div class="col-md-4 text-right">Conversation ID</div>
                        <div class="col-md-8 details-value" data-bind="text: conversationId"></div>
                    </div>
                </div>
                <div class="details-item">
                    <div class="row">
                        <div class="col-md-4 text-right">Token Count</div>
                        <div class="col-md-8 details-value" data-bind="text: tokenCount.toLocaleString()"></div>
                    </div>
                </div>
                <div class="details-item">
                    <div class="row">
                        <div class="col-md-4 text-right">Token Threshold</div>
                        <div class="col-md-8 details-value" data-bind="text: tokenThreshold.toLocaleString()"></div>
                    </div>
                </div>
            </div>
            <!-- ko if: recommendation -->
            <div class="alert alert-info margin-top margin-bottom">
                <strong>Recommendation:</strong>
                <p class="margin-top-xs" data-bind="text: recommendation"></p>
            </div>
            <!-- /ko -->
            <!-- ko if: tableItems.length > 0 -->
            <div class="margin-bottom" style="position: relative; height: 300px">
                <virtual-grid style="height: 300px" class="resizable flex-window" params="controller: gridController"></virtual-grid>
            </div>
            <!-- /ko -->
        </div>
        <div class="modal-footer" data-bind="compose: $root.footerPartialView">
        </div>
    </div>
</div>
<div class="tooltip json-preview js-ai-agent-token-threshold-tooltip" style="opacity: 0">
</div>
